<template>
  <view class="coupon-card">
    <view class="card-body">
      <view class="coupon-section">
        <view class="section-title">消费券</view>
        <view class="coupon-group">
          <view class="coupon-item" @tap="jump('A')">
            <view class="coupon-type">A券账户余额</view>
            <view class="coupon-value">{{business.balanceA || 0}}元</view>
          </view>
          <view class="coupon-item" @tap="jump('B')">
            <view class="coupon-type">B券账户余额</view>
            <view class="coupon-value">{{business.balanceB || 0}}元</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { store } from "@/store/index";
import Taro from "@tarojs/taro";

// 直接解构store中的响应式状态
const { business } = store.storeState;

const jump = (type) => {
  // Taro.navigateTo({
  //   url: "/pages-detail/coupon/index?type=" + type,
  // });
};
</script>

<style lang="scss">
$primary-color: var(--nut-primary-color);;
$text-color: #dd5353;
$subtext-color: #bbbbbb;
$bg-color: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%);
$card-bg: rgba(255, 255, 255, 0.05);
$divider-color: rgba(255, 255, 255, 0.1);

.coupon-card {
  width: 750rpx;
  overflow: hidden;
  color: $text-color;
  position: relative;
  margin: 0 auto;

  .card-header {
    padding: 40rpx;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid $divider-color;
  }

  .card-title {
    font-size: 36rpx;
    font-weight: 600;
    color: $text-color;
  }

  .card-body {
    padding: 40rpx;
  }

  .coupon-section {
    margin-bottom: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .section-title {
    padding: 30rpx 0;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    border-bottom: 1rpx solid #f5f5f5;

    &:before {
      content: "";
      display: inline-block;
      width: 8rpx;
      height: 28rpx;
      background: $primary-color;
      margin-right: 16rpx;
      border-radius: 4rpx;
    }
  }

  .coupon-group {
    display: flex;
    background: $bg-color;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .coupon-item {
    flex: 1;
    padding: 30rpx;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;

    &:not(:last-child):after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 60%;
      width: 1px;
      background: $divider-color;
    }

    &:active {
      background: rgba(255, 255, 255, 0.1);
    }
  }

  .coupon-type {
    font-size: 28rpx;
    color: $subtext-color;
    margin-bottom: 16rpx;
  }

  .coupon-value {
    font-size: 40rpx;
    font-weight: bold;
    color: $primary-color;
  }

  .card-footer {
    padding: 30rpx 40rpx;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 24rpx;
    color: #aaaaaa;
  }
}
</style>
